<template>
  <view class="page-container">
    <view class="input-group">
      <text class="label">输入值：</text>
      <input v-model="title" class="input-item input-red" />
    </view>
    <view class="input-group">
      <text class="label">回传值：</text>
      <input :value="callBackValue" class="input-item input-yellow" />
    </view>
    <comA :intent="title"></comA>
    <comB @callBackFun="callBack"></comB>
  </view>
</template>

<script>
import comA from '/components/comA.vue'
import comB from '/components/comB.vue'
export default {
  components: { comA, comB },
  data() {
    return { title: '', callBackValue: '' }
  },
  methods: {
    callBack(val) { this.callBackValue = val }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20rpx;
  width: 500rpx;
  margin: 0 auto;
}
.input-group {
  margin: 10rpx 0;
  display: flex;
  align-items: center;
}
.label {
  font-size: 28rpx;
  width: 120rpx;
}
.input-item {
  flex: 1;
  height: 40rpx;
  border: 1px solid #ccc;
  padding: 5rpx;
  font-size: 28rpx;
}
.input-red {
  color: red;
}
.input-yellow {
  color: yellow;
}
</style>